<template>
  <div>
    <div class="box">
      <div class="box0 box1"></div>
      <div class="box0 box2"></div>
      <div class="box0 box3"></div>
      <div class="box0 box4"></div>
      <div style="width: 30rem; height: 15rem" id="chart"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "MyVueEcharts1",

  data() {
    return {
      option: {
        resize: true,
        // 标题
        title: {
          text: "大洲感染总人数趋势图",
          // 字体样式
          textStyle: {
            color: "#ffffff",
            fontSize: 12,
            fontStyle: 100,
          },
          // 字体居中
          left: "center",
        },
        // 网格
        grid: {
          left: 80,
        },
        // 图例
        legend: {
          // 图例文字的颜色
          textStyle: {
            color: "#2f65b6",
          },
          top: 20,
        },

        xAxis: {
          // 类目轴
          type: "category",
          data: ["02/14", "04/11", "06/06", "08/01", "09/26", "11/21"],
          // 轴线的相关设置
          axisLine: {
            lineStyle: {
              color: "#2f65b6",
            },
          },
          // 轴与线条之间不留间隙
          boundaryGap: false,
        },
        yAxis: {
          // 数值轴
          type: "value",
          axisLine: {
            show: true,
            lineStyle: {
              color: "#2f65b6",
            },
          },
          // 分割线
          splitLine: {
            lineStyle: {
              color: "#012f4a",
            },
          },
        },
        // 系列
        series: [
          {
            type: "line",
            data: [0, 0, 0, 0, 0, 0],
            name: "亚洲",
            // 线条的样式
            itemStyle: {
              color: "#0a53a0",
            },
          },
          {
            type: "line",
            name: "北美洲",
            data: [3000000, 5000000, 7000000, 8000000, 1000000, 1500000],
            itemStyle: {
              color: "#8d465d",
            },
          },
          {
            type: "line",
            name: "大洋洲",
            data: [30000000, 31500000, 38500000, 40000000, 9000000, 11100000],
            itemStyle: {
              color: "#3585a7",
            },
          },
          {
            type: "line",
            name: "欧洲",
            data: [28000000, 27000000, 25000000, 40000000, 6000000, 31100000],
            itemStyle: {
              color: "#be8e4d",
            },
          },
          {
            type: "line",
            name: "其它",
            data: [10000000, 21500000, 28500000, 10000000, 7000000, 41100000],
            itemStyle: {
              color: "#6d60ca",
            },
          },
        ],
      },
    };
  },

  mounted() {
    let chart = document.querySelector("#chart");
    let obj = echarts.init(chart);
    obj.setOption(this.option);
  },

  methods: {

  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 31.25rem;
  height: 15.9375rem;
  border: .0625rem solid #06275b;
  position: relative;
  background-color: rgba(1, 11, 56, 0.1);
  margin-top: .625rem;
  .box0 {
    width: .625rem;
    height: .625rem;
  }
  .box1 {
    border-top: .0625rem solid #02a4b4;
    border-left: .0625rem solid #02a4b4;
  }
  .box2 {
    border-top: .0625rem solid #02a4b4;
    border-right: .0625rem solid #02a4b4;
    position: absolute;
    right: 0;
    top: 0;
  }
  .box3 {
    border-bottom: .0625rem solid #02a4b4;
    border-left: .0625rem solid #02a4b4;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  .box4 {
    border-bottom: .0625rem solid #02a4b4;
    border-right: .0625rem solid #02a4b4;
    position: absolute;
    bottom: 0;
    right: 0;
  }
}
</style>